<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Images Multi-Composantes</title>
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/mootools12_all_p.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
	var r_value = 100;
	var g_value = 100;
	var b_value = 100;
	var a_value = 255;

	var canvas;
	var canvasContext;
	var imgObj=0;
	var imgPixels;
	var mergeImageData;
	
	var ok = false;
	
	function grayscaleImage()
	{
		if(!ok) return;
		if(!imgObj)
		{
			imgObj = document.getElementById('lena');
			canvasContext.drawImage(imgObj, 0, 0);
			imgPixels = canvasContext.getImageData(0, 0, 256, 256);
		}
		mergeImageData = canvasContext.createImageData(256, 256);
		for(var y = 0; y < 256; y++){
			for(var x = 0; x < 256; x++){
				var i = (y * 4) * 256 + x * 4;
				mergeImageData.data[i] = imgPixels.data[i]*r_value/100.0;
				mergeImageData.data[i + 1] = imgPixels.data[i+1]*g_value/100;
				mergeImageData.data[i + 2] = imgPixels.data[i+2]*b_value/100;
				mergeImageData.data[i + 3] = 255*a_value/100;
			}
		}
		canvasContext.putImageData(mergeImageData,0,0);
	}
	
	// ON LOAD 
	/*window.addEvent('domready',*/ function charge() {
	
	canvas = document.getElementById('exemple');
	canvasContext = canvas.getContext('2d');
	if(document.getElementById('lena'))
	{
		imgObj = document.getElementById('lena');
		canvasContext.drawImage(imgObj, 0, 0);
		imgPixels = canvasContext.getImageData(0, 0, 256, 256);
	}
	
	var mySlideR = new Slider($('slider_gutter_1'), $('slider_knob_1'), "",{
		start: 0,
		end: 100,
		offset: 10,
		onChange: function(pos){
			$('slider_current_val').setHTML("Rouge : "+pos+"%");			
			var value = pos;
			r_value = value;
			grayscaleImage();
		}
	}, null).setMin(100);

	var mySlideG = new Slider($('slider_gutter_2'), $('slider_knob_2'), "",{
		start: 0,
		end: 100,
		offset: 10,
		onChange: function(pos){
			$('slider_current_val2').setHTML("Vert : "+pos+"%");			
			var value = pos;
			g_value = value;
			grayscaleImage();
		}
	}, null).setMin(100);

	var mySlideB = new Slider($('slider_gutter_3'), $('slider_knob_3'), "",{
		start: 0,
		end: 100,
		offset: 10,
		onChange: function(pos){
			$('slider_current_val3').setHTML("Bleu : "+pos+"%");			
			var value = pos;
			b_value = value;
			grayscaleImage();
		}
	}, null).setMin(100);
	
	var mySlideA = new Slider($('slider_gutter_4'), $('slider_knob_4'), "",{
		start: 0,
		end: 100,
		offset: 10,
		onChange: function(pos){
			$('slider_current_val4').setHTML("Alpha : "+pos+"%");			
			var value = pos;
			a_value = value;
			grayscaleImage();
		}
	}, null).setMin(100);
	
	$('slider_current_val').setHTML("Rouge : 100%");
	$('slider_current_val2').setHTML("Vert : 100%");
	$('slider_current_val3').setHTML("Bleu : 100%");
	$('slider_current_val4').setHTML("Alpha : 100%");

	ok = true;
	}	
	//);
</script>
</head>
<body onLoad="javascript:charge()">
<div id="templateo_container">
	<div id="templatemo_top_panel">
    	<div id="site_logo">
        	<a href="index.html"><img src="images/templatemo_logo.jpg" alt="Images Multi-Composantes" /></a>
        </div>
        <div id="header_menu_section">
            <div class="header_menu contact_menu">
            	<a href="http://www.ingenieur-imac.fr/"></a>
            </div>
        </div><!-- end of header mneu section -->
    
    	<div class="cleaner"></div>
    </div> <!-- end of top panel -->
    
    <div id="templatemo_menu_banner_panel">
    
    	<div id="templatemo_menu_wrapper">
        	<div id="templatemo_menu">
                <ul>
                     <li><a href="index.html">Accueil</a></li>
					  <li><a href="explication.html">Théorie des images </a></li>
                      <li><a href="rgb.html">Images RGB</a></li>
					  <li><a href="hsv.html">Images HSV & CMYK</a></li>
                      <li class="last"><a href="hyperspectrale.html">Images Hyperspectrales</a></li>
                </ul>    	
            </div> <!-- end of menu -->        
        </div> <!-- end of menu wrapper -->
        
        <div id="templatemo_banner">
        
        	<div class="header_02"  style="color:#ffffff">Images RGB</div>
            <p></p>
        
        </div> <!-- end of banner -->
        
        <div class="cleaner">&nbsp;</div>    
    </div> <!-- end of menu & banner panel -->
    
    <div id="templatemo_content_wrapper">
    	
        <div id="templatemo_content">
			<div class="header_01">Qu'est-ce qu'une image RGB</div>
			<div class="section_w600">
				<div class="header_02">Théorie</div>
				<p>
				Une image RGB (Red Green Blue) ou RVB (Rouge Vert Bleu) est une image ou chaque pixel dispose de 3 composantes, qui sont les couleurs primaires (ou élémentaires) uniquement pour la synthèse additive. Elles sont mélangées pour obtenir la couleur finale.
				Les valeurs des composantes indiquent la quantité de couleur à apporter au mélange. En imagerie numérique, les couleurs sont additives et non pas soustractives comme en peinture. Par exemple, si on ajoute
				les valeurs maximales de chaque composantes, on obtiendra du blanc en image numérique alors que l'on aura du marron en peinture. Ceci est dû aux dalles LCD, LED, ... des écrans qui ajoutent de la lumière et donc une
				couleur plus claire, alors que les mélanges en peinture absorbent plus de longueurs d'onde et renvoient donc une couleur plus sombre.</br></br>
				</p>
				<center>
					<img src="exemples/additive.png" />
					<img src="exemples/soustractive.png" /></br>
					<i style="color:black">Couleurs additives / couleurs soustractives</i>
				</center></br></br>
				<p>
				Chaque image dispose donc de 3 canaux afin de reconstituer les couleurs. Si on sépare ces canaux, on obtient alors 3 images en nuances de gris. Elles représentent la contribution au mélange final pouvant apporté par chaque canal.
				On pourra aussi les représenter sous une simple forme de <a href="explication.html">champ 2D</a>. Plus le pixel est noir, plus la contribution de chacune des composantes est forte et inversement.
				</p></br></br>
				<center>
					<img src="exemples/lena_r.jpg" />
					<img src="exemples/lena_g.jpg" />
					<img src="exemples/lena_b.jpg" /></br>
					<i style="color:black">Canal rouge, canal vert, canal bleu</i></br></br>
					<img src="exemples/lena.jpg" /></br>
					<i style="color:black">Composantes réunies</i>
				</center>
				</br></br>
				<div class="header_02">Pratique</div>
				<p>
				En pratique, les données peuvent être stockées de différentes façons. On distingue principalement 2 types d'images :</br>
				<ul style="color:black">
				<li>Les formats compressées tels que JPG, PNG, ... utilisent des algorithmes analysant l'image afin de réduire la place des données stockées, avec ou sans pertes. Ces données sont impossibles à récupérer directement sans passer par une synthèse qui reconstruira les alors les 3 canaux de l'image.</li>
				<li>Les formats bruts tels que BMP, PPM, RAW, ... disposent d'une norme de codage très simple et laissant apparaitre facilement les valeurs des composantes des pixels de l'image.</li>
				</ul>
				</p>
			</div>
			<br/><br/><br/>
			<div class="header_01">Exemple d'image RGB : format PPM</div>
				<p>Le format de fichier PPM est un format dit "brut" en français ou "raw" en anglais, qui ne compresse pas les données et donc il n'y a pas de pertes d'informations (et donc pas de dégradation de l'image). La
				technique pour sauvegarder les données se rapproche de la représentation par <a href="explication.html" >champ 2D</a> pointant vers une vecteur de données de taille 3.
				</br></br>
				Il permet d'avoir des images soit en niveau de gris sur 1 canal soit en couleur sur 3 canaux (composantes rouge/vert/bleu).
				</p>
				</br>
				<div class="header_02">Format de fichier</div>
				<p>
				Afin que le fichier soit 'décryptable' par les logiciels de visualisation, le format respecte la norme suivante :</br>
				</p>
				<ul style="color:black">
					<li>1 - Type d'image : 'P5' (image n&b) ou 'P6' (image couleur)</li>
					<li>2 - Taille de l'image : largeur 'espace' hauteur (ex: 512 512)</li>
					<li>3 - Valeur maximale d'une couleur : entre 0 et 65536, généralement 255</li>
					<li>4 - Valeur de chaque pixel : 1 nombre en 'P5' pour le niveau de gris ou 3 nombres en 'P6' pour la valeur de chaque composantes/canaux</li>
				</ul>
				<p>
				Cette norme permet de savoir comment récupérer les informations de chaque pixel et de savoir où l'afficher dans l'image.</br></br>
				Pour une image RGB :</br>
				<img src="http://latex.codecogs.com/gif.latex?\small%20\forall%20x%20\in%20\begin{bmatrix}%200%20&%20N%20\end{bmatrix}\;%20et\;%20\forall%20y%20\in%20\begin{bmatrix}%200%20&%20M%20\end{bmatrix}%20,%20P_x_,_y%20=%20\begin{bmatrix}%20r%20&%20v%20&%20b%20\end{bmatrix}" /></br>
				Pour une image n&b :</br>
				<img src="http://latex.codecogs.com/gif.latex?\small%20\forall%20x%20\in%20\begin{bmatrix}%200%20&%20M%20\end{bmatrix}\;%20et\;%20\forall%20y%20\in%20\begin{bmatrix}%200%20&%20M%20\end{bmatrix}%20,%20P_x_,_y%20=%20g" /></br></br>
				ou N est le nombre de colonnes de l'image, M le nombre de lignes de l'image, r,v,b les composantes de couleur et g le niveau de gris.</br></br>
				Pour récupérer une composante d'un pixel de l'image, on peut utiliser l'application suivante :</br></br>
				<img src="http://latex.codecogs.com/gif.latex?\small%20f(x,y,c)%20=%20y*N%20+%20x*3%20+%20c\;%20\;%20\;%20\;%20\;%20\;%20avec\;%20\;%20c\in%20\begin{Bmatrix}%200%20&%201%20&%202%20\end{Bmatrix}" /></br></br>
				Pour récupérer tout un pixel :</br></br>
				<img src="http://latex.codecogs.com/gif.latex?\small%20f(x,y)%20=%20\begin{bmatrix}%20y*N%20+%20x*3\\%20y*N%20+%20x*3%20+1\\%20y*N%20+%20x*3%20+2%20\end{bmatrix}" /></br></br>
				</p>
				<center>
					<img src="exemples/ppm.jpg" /></br><i style="color:black">Format PPM imagé d'une image 4*20 pixels</i>
				</center>
				<div class="header_02">Exemple lena.ppm</div>
				<p>Si lena vient à être enregistrée sous forme PPM, l'image une fois ouverte dans un éditeur de texte ressemblera, selon les logiciels, à l'image ci-dessous :</p></br>
				<center>
					<img src="exemples/lenappm.jpg" /></br>
					<i style="color:black">Exemple de lena.ppm</br>3 composantes (P6) de taille 512*512 pixels et de valeur maximum 255 de chaque composante</i>
				</center>
				
			<div class="section_w600">
			</div>
			<br/><br/><br/>
			<div class="header_01">Application interactive - Image RGBA</div>
			<div class="section_w600">
				<p>
				Voici une application permettant de faire varier les paramètres des différents canaux d'une image, rouge, vert, bleu et l'alpha (qui correspond à la transparence de l'image).
				Les glissières ci-dessous servent à définir les taux de visibilité de chaque canal. Par exemple, un taux de 0%, pour le rouge, masquera complètement la composante associée sur chaque pixel de l'image. Au contraire
				un taux de 100% affichera la composante dans sa valeur initiale.
				</p>
				<br/><br/>
				<div style="width:30%; float: left">
					<!-- Start  Slider with one knob -->
					
					  <div class="fontblue" id="slider_current_val"></div>
					  <div class="slide_container" >
						<div class="slider_gutter" id="slider_1" >
						  <div class="slider_gutter_l slider_gutter_item iconsprite_controls"></div>
						  <div id="slider_gutter_1" class="slider_gutter_m slider_gutter_item gutter iconsprite_controls">
							<!-- <img id="slider_bkg_img_1" src="images/red_bkg_slider.gif"/>-->
							<div id="slider_knob_1" class="knob"></div>
						  </div>
						  <div class="slider_gutter_r slider_gutter_item iconsprite_controls"> </div>
						</div>
					</div>
					<!-- End  Slider with one knob -->
					<br/><br/><br/>
					<!-- Start  Slider with one knob -->
					  <div class="fontblue" id="slider_current_val2"></div>
					  <div class="slide_container" >
						<div class="slider_gutter" id="slider_2" >
						  <div class="slider_gutter_l slider_gutter_item iconsprite_controls"></div>
						  <div id="slider_gutter_2" class="slider_gutter_m slider_gutter_item gutter iconsprite_controls">
							<!-- <img id="slider_bkg_img_2" src="images/green_bkg_slider.gif"/>-->
							<div id="slider_knob_2" class="knob"></div>
						  </div>
						  <div class="slider_gutter_r slider_gutter_item iconsprite_controls"> </div>
						</div>
						</div>
					<!-- End  Slider with one knob -->
					<br/><br/><br/>

					<!-- Start  Slider with one knob -->
					  <div class="fontblue" id="slider_current_val3"></div>
					  <div class="slide_container" >
						<div class="slider_gutter" id="slider_3" >
						  <div class="slider_gutter_l slider_gutter_item iconsprite_controls"></div>
						  <div id="slider_gutter_3" class="slider_gutter_m slider_gutter_item gutter iconsprite_controls">
							<!-- <img id="slider_bkg_img_3" src="images/blue_bkg_slider.gif"/>-->
							<div id="slider_knob_3" class="knob"></div>
						  </div>
						  <div class="slider_gutter_r slider_gutter_item iconsprite_controls"> </div>
						</div>
						</div>
					<!-- End  Slider with one knob -->
					
					<br/><br/><br/>

					<!-- Start  Slider with one knob -->
					  <div class="fontblue" id="slider_current_val4"></div>
					  <div class="slide_container" >
						<div class="slider_gutter" id="slider_4" >
						  <div class="slider_gutter_l slider_gutter_item iconsprite_controls"></div>
						  <div id="slider_gutter_4" class="slider_gutter_m slider_gutter_item gutter iconsprite_controls">
							<!-- <img id="slider_bkg_img_3" src="images/blue_bkg_slider.gif"/>-->
							<div id="slider_knob_4" class="knob"></div>
						  </div>
						  <div class="slider_gutter_r slider_gutter_item iconsprite_controls"> </div>
						</div>
						</div>
					<!-- End  Slider with one knob -->
				</div>
				<div style="width:70%; float: right">
					<canvas id="exemple" width="256" height="256">
					  Votre navigateur ne supporte pas les canvas.
					</canvas>
					<img src="exemples/lena.jpg" id="lena" />
				</div>
			</div>
            <div class="clearfix"></div>
        </div> <!-- end of content -->
        
    </div> <!-- end of content wrapper -->
    
    <div id="templatemo_footer">
        Copyright © 2012 Adrien KIELB | Designed by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
    </div> <!-- end of footer -->
</div> <!-- end of container -->
</body>
</html>